<template>
	<view class="animated fadeIn faster">
		<view class="px-3 mb-3 pt-2">
			<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
		</view>
		<view class="px-3 pb-5" v-if="tab == 0">
			<view class="bg-fff rounded10 p-2 mb-2" v-for="exam in records.exam_records" :key="exam.id">
				<view class="text-clamp-two font30 mb-2">{{exam.paper_name}}</view>
				<view class="d-flex d-flex-between d-flex-middle">
					<view class="d-flex d-flex-middle color999 font24">
						<text>总分：</text><text class="color000 mr-3">{{exam.total_score}}分</text>
						<text>得分：</text><text class="colorf00 mr-3">{{exam.user_score}}分</text>
						<text>正确率：</text><text class="colorsuccess">{{exam.correct_rate}}%</text>
					</view>
					<view class="d-flex d-flex-end" @click="checkExam(exam.submit_id)">
						<view class="inspect d-flex d-flex-center d-flex-middle">查看</view>
					</view>
				</view>
			</view>
			<view class="load-more d-flex d-flex-center d-flex-column d-flex-middle">
				<image class="mb-2" v-if="loadingType == 2 && records.exam_records.length == 0"
					src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/empty.png"
					style="width: 198rpx;height: 128rpx;margin-top: 260rpx;"></image>
				<text>{{loadingType === 0 ? '上拉显示更多' : (loadingType === 1 ? '正在加载...' : '~ 没有更多考试记录了 ~')}}</text>
			</view>
		</view>
		<view class="px-3 pb-3" v-if="tab == 1">
			<view class="bg-fff rounded10 p-2 mb-2" v-for="exam in records.periodic_records" :key="exam.id">
				<view class="text-clamp-two font30 mb-2">{{exam.paper_name}}</view>
				<view class="d-flex d-flex-between d-flex-middle">
					<view class="d-flex d-flex-middle color999 font24">
						<text>总分：</text><text class="color000 mr-3">{{exam.total_score}}分</text>
						<text>得分：</text><text class="colorf00 mr-3">{{exam.user_score}}分</text>
						<text>正确率：</text><text class="colorsuccess">{{exam.correct_rate}}%</text>
					</view>
					<view class="d-flex d-flex-end" @click="checkExam(exam.submit_id)">
						<view class="inspect d-flex d-flex-center d-flex-middle">查看</view>
					</view>
				</view>
			</view>
			<view class="load-more d-flex d-flex-center d-flex-column d-flex-middle">
				<image class="mb-2" v-if="loadingType == 2 && records.periodic_records.length == 0"
					src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/empty.png"
					style="width: 198rpx;height: 128rpx;margin-top: 260rpx;"></image>
				<text>{{loadingType === 0 ? '上拉显示更多' : (loadingType === 1 ? '正在加载...' : '~ 没有更多考试记录了 ~')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi.js'
	export default {
		data() {
			return {
				loadingType:1,
				tab:0,
				tabArr: [{
					name: '真题考试',
					id: '1'
				}, {
					name: '定期考试',
					id: '2'
				}],
				records:{
					exam_records:[],
					periodic_records:[]
				}
			}
		},
		onReady() {
			this.getExamList()
		},
		methods: {
			tabChange(e){
				this.tab = e
			},
			getExamList(){
				let that = this
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				that.loadingType = 1
				userApi.examQuestion('13').then((res)=>{
					uni.hideLoading()
					that.loadingType = 2
					that.records = res.records
				}).catch((e)=>{
					that.loadingType = 2
					uni.hideLoading()
				})
			},
			checkExam(eid){
				uni.navigateTo({
					url:'/subPages/examInfo/examInfo?eid='+eid
				})
			}
		}
	}
</script>

<style scoped>
.rewrite{
	width: 100rpx;
	height: 40rpx;
	border-radius: 50rpx;
	border: solid 1px #FFA18C;
	background-color: rgba(255, 87, 51, 0.3);
	color: #D43030;
	font-size: 24rpx;
}
.inspect{
	width: 100rpx;
	height: 40rpx;
	border-radius: 50rpx;
	border: solid 1px #3E8EFE;
	background-color: rgba(42, 130, 228, 0.2);
	color: #3E8EFE;
	font-size: 24rpx;
}
</style>
